<template>
  <div class="list-content">
    <h4 class="list-title">
      <span class="title-line"></span>
      <span>附近商家</span>
      <span class="title-line"></span>
    </h4>
    <ScrollView  :loadCallback="onLoadPage" :is_end="is_end" :ready_to_load="ready_to_load" :page="page">
      <ListItem :key="index" :data="item"  v-for="(item,index) of home_list"></ListItem>
    </ScrollView>
  </div>
</template>

<script>
  //首页列表
  import { mapState } from 'vuex'
  import  ScrollView from "@/components/common/ScrollView"
  import  ListItem from "@/components/common/ListItem"
  export default {
    name: 'HomeContentList',
    data(){
      return {page:1}
    },
    components:{
      ScrollView,
      ListItem
    },
    created() {

    },
    computed: {
    ...mapState(['home_list','is_end','ready_to_load']),
    },
    methods:{
      onLoadPage(){
        this.$store.dispatch('homeList',this.page++)
      }
    }
  }
</script>

<style lang="stylus" scoped>
  @import '~@/assets/main.styl'
  .list-content {
    overflow: hidden;
    padding-bottom: (0.1rem);
    .list-title {
      text-align: center;
      font-size:(16px);
      margin-top: (0.28rem);
      margin-bottom: (0.01rem);
    }
    .title-line {
      display: inline-block;
      border-bottom: 1px solid #949494;
      height: (0.01rem);
      width: (0.6rem);
      margin-left: (0.08rem);
      margin-right: (0.08rem);
      margin-bottom: (0.08rem);
    }

  }
</style>
